<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../css/discovery.css" />
</head>

<body>
	<div id='app' style="display:none" v-show="true">
		<div class="user_form">
			<div class="header">
				<div class="title">
					我
<!--					<div class="icons" style="padding-top:1.2rem">-->
<!--						&lt;!&ndash; <div class="msg"><img src="../image/message.png" alt=""><i>8</i></div> &ndash;&gt;-->
<!--						<div class="set" @click="openWin(isLogin ? './me/setting_win' : 'login')">-->
<!--							<img src="../image/setting.png">-->
<!--						</div>-->
<!--					</div>-->
				</div>
				<div class="header">
					<div  class="item right right-top profile" style="margin-top: 1rem;" @click="openWin('./me/profile_win')">
						<div class="dl">
							<img :src="imageBasePath + userInfo.usrImg" class="oval" onerror="this.src='../image/default_head.png'">
						</div>
						<div class="dr">
							<div class="l1" style="width:10rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
								{{userInfo.usrName}}
							</div>
							<div class="l2">
								<span class="me-level">{{userInfo.levelName}}</span>
								<span class="next-level">距下一个等级还差{{userInfo.nextLevelPointNeed}}分</span>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<script type="text/javascript" src="../script/api.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script type="text/javascript" src="../script/common.js"></script>
		<script type="text/javascript" src="../script/layer_mobile/layer.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					height: 'auto',
					imageBasePath: imageBasePath,
					userInfo: {},
					isLogin: false,
					apiready: false,
					// <span v-if="isLogin && msgCount>0" class="num">{{msgCount}}</span>
					// msgCount: 0
				},
				mounted: function() {
					var $this = this;
					apiready = function() {
						// hide this frame
						api.setFrameAttr({
							name: api.frameName,
							hidden: true
						});
						// fix header
						var header = document.querySelector('.header');
						$api.fixStatusBar(header);

						api.parseTapmode();
						$this.apiready = true;
						$this.init();
						$this.addEventListener();
						api.addEventListener({
							name: 'user_login_logout_event'
						}, function(ret, err) {
							$this.init();
						});
					}
				},
				methods: {
					init: function() {
						api.parseTapmode();
						var $this = this;
						var userInfo = $api.getStorage(_.USERINFO);
						$this.userInfo = userInfo || {};
						$this.isLogin = !!userInfo;
						if (isLogin()) {
							$this.openFrm();
						} else {
							// msgUtil.toast({ msg:'请先登录' });
							api.closeFrame({
							    name: 'my_zone_frm'
							});
						}
					},
					openFrm: function() {
						var header = document.querySelector('.header');
						$api.fixStatusBar(header);
						var _height = (api.systemType==='ios') ? 40 :40
						api.openFrame({
								name: 'my_zone_frm',
								url: 'my_zone_frm.html',
								bounces: false,
								allowEdit: false,
								rect: {
									x: 0,
									y: $api.offset(header).h + _height,
									w: 'auto',
									h: api.frameHeight - $api.offset(header).h - _height
								},
								hScrollBarEnabled: false,
								vScrollBarEnabled: true
							});

					},
					addEventListener: function() {
						var $this = this;
						api.addEventListener({
							name: 'user_login_logout_event'
						}, function(ret, err) {
							var userInfo = $api.getStorage(_.USERINFO);
							$this.userInfo = userInfo || {};
							$this.isLogin = !!userInfo;
						});
						api.addEventListener({
							name: 'refresh_userInfo_event'
						}, function(ret, err) {
								post('/client/user/selectMyInfo', {}, function(ret) {
									if(ret.isSuccess){
										updateStorageUserInfo(ret.data);
										$this.userInfo = $api.getStorage(_.USERINFO) || {};
									}
								});

						});

						api.addEventListener({
							name: EVENT.LOGOUT_EVENT
						}, function () {
							$this.logout();
						})
					},
					logout: function () {
						var $this = this;
						msgUtil.confirm({
							title: '提示',
							msg: '确认退出登录吗？',
							buttons: ['确定', '取消'],
							yes: function () {
								msgUtil.toast({msg: '退出登录'});
								post('/client/user/logout', {}, function (ret) {
									if (ret.isSuccess) {
										$api.rmStorage(_.USERINFO);
										$api.rmStorage('CODE');
										api.sendEvent({
											name: 'user_login_logout_event'
										});

										api.closeFrame({
											name: 'my_zone_frm'
										});
										setTimeout(function () {
											closeWin()
										}, 1000)
									} else {
										msgUtil.toast({msg: ret.message});
									}
								})
							}
						})
					},
				}
			});
		</script>
</body>

</html>
